---
title: Toggle
description: A button with a true or false state, which can be activated or deactivated by toggling.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/toggle?raw';

<LinkButton href='https://rn-primitives.vercel.app/toggle'>Toggle Primitive</LinkButton>
<LinkButton href='/components/text'>Text Component</LinkButton>
<LinkButton target='_blank' href='https://rnr-showcase.vercel.app/toggle'>
  Demo
</LinkButton>

<br />

A button with a true or false state, which can be activated or deactivated by toggling.

### Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add toggle
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type='tip' title='Dependencies'>
      Before copy/pasting, add the <a href='https://rn-primitives.vercel.app/toggle' className='text-white font-bold'>toggle primitive</a> and the <a href='/components/text' className='text-white font-bold'>text component</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/toggle.tsx`:**

    <Code code={importedCode} lang='tsx' title='~/components/ui/toggle.tsx' />
  </TabItem>
</Tabs>


### Usage

```tsx
import * as React from 'react';
import { View } from 'react-native';
import { Toggle, ToggleIcon } from '~/components/ui/toggle';
import { Bold } from '~/lib/icons/Bold';

function Example() {
  const [pressed, setPressed] = React.useState(false);
  return (
    <View className='flex-1 justify-center items-center p-6 gap-12'>
      <Toggle
        pressed={pressed}
        onPressedChange={setPressed}
        aria-label='Toggle bold'
        variant='outline'
      >
        <ToggleIcon icon={Bold} size={18} />
      </Toggle>
    </View>
  );
}
```

## Props

### Toggle

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|   Prop   |  Type   |     Note     |
| :------: | :-----: | :----------: |
| pressed  | boolean | |
| onPressedChange  | (val: boolean) => void | |
| asChild  | boolean | _(optional)_ |
| disabled  | boolean | _(optional)_ |
| variant | 'default' \| 'outline' | _(optional)_ |
| size | 'default' \| 'sm' \| 'lg' | _(optional)_ |

### ToggleIcon

Extends [`LucideIcon`](https://lucide.dev/guide/packages/lucide-react-native#props) props

|    Prop    |        Type        |     Note     |
| :--------: | :----------------: | :----------: |
|  icon      |     LucideIcon     |              |
